<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			li{
				display: flex;
				width: 100%;
				height: 30px;
				background-color:  aliceblue;
				justify-content: space-between;
				line-height: 1.5;
				color: #000;
				border-bottom: 1px solid #000;
				box-sizing: border-box;
				
			}
			#xwapp{
				width: 500px;
				height: auto;
				margin: 0 auto;
				padding-top: 50px;
			}
			.header{
				width: 500px;
				height: 100px;
				background-color: #6495ED;
				text-align: center;
			}
			.header input{
				width: 450px;
				height: 40px;
				border: 0px;
			}
			.main{
				width: 500px;
				min-height: 50px;
				background-color: #FAEBD7;
			}
			span{
				padding-left: 10px;
				padding-right: 10px;
			}
			button{
				width: 30px;
				height: 70%;
				float: right;
				opacity: 0;
			}
			li:hover button{
				opacity: 1;
			}
			
			.cler{
				display: flex;
				width: 100%;
				justify-content: space-between;
				background-color: antiquewhite;
				
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		
		<!--主体区域-->
		<section id="xwapp">
			<!--输入框-->
			<header class="header">
				<h1>小王记事本</h1>
				<input autofocus="autofocus" autocomplete="off" placeholder="请输入笔记" @keyup.enter="add" v-model="inputvalue" class=""/>
			</header>
			<!--列表区域--> 
			<section class="main">
				<ul>
					<li v-for="(item,index) in arr">
						<span>{{index+1}}.</span>
						<div class="">
							{{item}}
						</div>
						<button @click="remove(index)">X</button>
					</li>
				</ul>
			</section>
			<!--统计和清空-->
			<footer class="cler" v-if="arr.length != 0">
				<div class="">
					统计：{{arr.length}}
				</div>
				<div class="" @click="qk">
					清空
				</div>
			</footer>
		</section>
		
		
	</body>
	<script type="text/javascript">
		var xwapp = new Vue({
			el:"#xwapp",
			data:{
				arr:["今天天气不错","今天饭菜不错"],
				inputvalue:""
			},
			methods:{
				add:function(){
					this.arr.push(this.inputvalue); //添加
				},
				remove:function(index){
					this.arr.splice(index,1); //删除
				},
				qk:function(){
					this.arr.splice(this.arr); //清空
				}
			}
		})
	</script>
</html>
